<template>
  <div class="outer-container">
    <div class="admin_box" ref="adminBoxElement">
      <div class="head">
        <div style="display: flex">
          <svg
            t="1713180017956"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2436"
            width="100"
            height="50"
          >
            <path
              d="M82.2784 0h859.4432v1024H82.2784V0m54.8864 55.0912c-0.0512 304.5888-0.0512 609.2288 0 913.8176 249.9072 0.0512 499.7632 0.0512 749.6192 0 0.0512-304.5888 0.0512-609.2288 0-913.8176-249.856-0.0512-499.712-0.0512-749.6192 0z"
              fill=""
              p-id="2437"
            ></path>
            <path
              d="M378.3168 193.6384c51.6608-41.6256 122.0096-53.3504 186.112-41.1648 58.368 13.9264 110.592 53.1968 138.9056 106.2912 19.6096 34.9184 25.7024 75.3664 25.9584 114.8928-0.0512 102.4512 0 204.8512-0.0512 307.3024-1.6896 13.3632 8.8576 22.8864 15.5648 33.1264 31.8464 45.6704 46.7456 101.0688 49.3568 156.2624-19.1488 0.1024-38.2976 0.0512-57.4464 0-2.9184-35.6352-9.216-71.2704-25.9072-103.2704-52.2752-0.256-104.4992 0.8704-156.7744 0.3584-0.3072-38.8096-0.1536-77.6192-0.2048-116.4288-44.5952-10.4448-91.6992-2.6624-133.5808 14.6432C340.224 699.392 286.0544 783.872 286.3616 870.4H230.3488c-2.6624-68.4032 25.7024-135.7824 70.4512-186.7264 6.2976-5.9392 4.0448-15.2576 4.7104-22.9376-0.5632-78.5408 0.3584-157.1328-0.4608-235.6736-1.9456-39.1168-0.7168-78.2848 1.0752-117.4016 4.6592-46.7968 33.3824-88.4736 72.192-114.0224m183.3472 15.8208c6.4512 18.176 24.064 29.6448 31.0272 47.7696 21.8624 40.6528 15.6672 87.7056 16.384 131.9424 0.3584 107.5712 0.256 215.0912 0.3072 322.6624 21.4528 0.0512 42.9568 0.1536 64.4096-0.256-0.1536-112.64-0.1024-225.3312 0-337.9712-0.256-27.1872-2.9696-55.1936-15.104-79.9744-17.9712-40.448-54.8352-71.3728-97.024-84.1728m-160.8704 36.7616c-28.3136 18.4832-42.3424 53.1968-41.2672 86.272 64.9216 0.6144 129.792 0.2048 194.7136 0.256 2.304-43.1616-25.6-86.9888-68.3008-98.048-28.4672-10.0864-59.3408-1.9968-85.1456 11.52m-39.5776 141.6704c-0.3072 23.0912 0.512 47.36 12.6976 67.7888 18.1248 34.3552 55.7056 55.4496 94.1568 56.6272 0.0512 18.3296 0.0512 36.6592 0 55.04-39.7824-0.8704-77.9776-16.384-108.0832-42.1888 0.5632 35.7888 0 71.5776 0.4096 107.4176 56.6784-36.2496 127.0784-51.456 193.5872-40.8064-0.3584-67.9424-0.0512-135.936-0.2048-203.8784-64.1536-0.0512-128.3584-0.0512-192.5632 0z"
              fill=""
              p-id="2438"
            ></path>
          </svg>
          <p style="font-size: 45px; font-family: STXinwei">艺术品交易平台</p>
        </div>
        <!-- <div class="search">
          <div class="search_Box">
            <span style="color: #000; font-size: 18px; width:80px; line-height:2">作品</span>
            <el-input
              type="text"
              autocomplete="off"
              name="HeaderInput"
              id="HeaderInput"
              placeholder="搜索感兴趣的关键字"
            />
            <el-button type="primary" icon="el-icon-search" style="margin-left:10px">搜索</el-button>
          </div>
        </div> -->
        <ul>
          <router-link
            :to="{ name: 'shoppingCart' }"
            v-if="user.is_superuser == false && user.role == 1"
          >
            <li>
              <svg
                t="1712735124591"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3237"
                width="24"
                height="24"
                style="margin: 6px"
              >
                <path
                  d="M919.68 704H292.48l-160-576H28.8V64h152.32l160 576h525.12l52.16-288H412.8V288h582.4l-75.52 416zM380.8 960a96 96 0 1 1 96-96 96 96 0 0 1-96 96z m0-128a32 32 0 1 0 32 32 32 32 0 0 0-32-32zM796.8 960a96 96 0 1 1 96-96 96 96 0 0 1-96 96z m0-128a32 32 0 1 0 32 32 32 32 0 0 0-32-32z"
                  fill="#2A2A3B"
                  p-id="3238"
                ></path>
                <path
                  d="M476.8 416h64v160h-64zM668.8 416h64v160h-64z"
                  fill="#2A2A3B"
                  p-id="3239"
                ></path>
              </svg>
              购物车
            </li>
          </router-link>
          <router-link
            :to="{ name: 'myOrders' }"
            v-if="user.is_superuser == false"
          >
            <li>
              <svg
                t="1709259430166"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="9613"
                width="26"
                height="26"
                style="margin: 6px"
              >
                <path
                  d="M400.473951 156.804279c17.248849 0 31.233352-13.985526 31.233352-31.233352L431.707302 95.099938c0-17.248849-13.985526-31.233352-31.233352-31.233352s-31.233352 13.985526-31.233352 31.233352l0 30.470989C369.239576 142.819776 383.225101 156.804279 400.473951 156.804279z"
                  fill="#2c2c2c"
                  p-id="9614"
                ></path>
                <path
                  d="M623.426789 156.804279c17.248849 0 31.233352-13.985526 31.233352-31.233352L654.66014 95.099938c0-17.248849-13.985526-31.233352-31.233352-31.233352-17.248849 0-31.234375 13.985526-31.234375 31.233352l0 30.470989C592.192414 142.819776 606.177939 156.804279 623.426789 156.804279z"
                  fill="#2c2c2c"
                  p-id="9615"
                ></path>
                <path
                  d="M428.701852 226.88745c11.209296 18.047028 41.97602 48.589648 86.157265 48.589648 43.958164 0 75.100442-30.3134 86.574774-48.223305 9.302877-14.528901 5.068436-33.846876-9.455349-43.149752-14.549368-9.307993-33.846876-5.068436-43.149752 9.455349-0.121773 0.198521-13.379729 19.449981-33.968649 19.449981-20.008706 0-32.443923-18.127869-33.277918-19.373233-9.165754-14.422478-28.28009-18.804275-42.829458-9.760295C424.095951 192.980199 419.597497 212.236775 428.701852 226.88745z"
                  fill="#2c2c2c"
                  p-id="9616"
                ></path>
                <path
                  d="M762.273067 140.343375c-14.295588-9.653871-33.714869-5.897314-43.363623 8.398274-9.658987 14.290471-5.897314 33.709753 8.398274 43.363623 106.359376 71.852468 169.859619 191.271278 169.859619 319.445496 0 201.879893-156.140153 367.871415-353.984127 383.837038L543.18321 647.888923c49.735751-13.732769 86.412069-59.264778 86.412069-113.308649 0-64.872496-52.772924-117.64542-117.64542-117.64542s-117.650537 52.772924-117.650537 117.64542c0 54.044894 36.679387 99.57588 86.417185 113.308649l0 247.498884C282.872532 879.422184 126.732379 713.430662 126.732379 511.550769c0-128.173195 63.49922-247.593028 169.854503-319.445496 14.295588-9.653871 18.057261-29.073152 8.398274-43.363623-9.653871-14.295588-29.073152-18.052145-43.363623-8.398274C138.044006 223.827765 64.264653 362.595248 64.264653 511.550769c0 246.851131 200.828958 447.680089 447.685205 447.680089s447.685205-200.828958 447.685205-447.680089C959.635063 362.595248 885.856733 223.827765 762.273067 140.343375zM456.767048 534.579251c0-30.425963 24.756847-55.177694 55.18281-55.177694s55.177694 24.75173 55.177694 55.177694c0 30.425963-24.75173 55.18281-55.177694 55.18281S456.767048 565.005214 456.767048 534.579251z"
                  fill="#2c2c2c"
                  p-id="9617"
                ></path>
                <path
                  d="M389.251352 740.659817c3.970428 1.677199 8.093329 2.475378 12.149714 2.475378 12.175297 0 23.740704-7.163143 28.783557-19.078521 6.715959-15.886829-0.716314-34.213219-16.603143-40.933271-60.408835-25.549909-99.44592-84.439134-99.44592-150.027945 0-62.925145 36.84107-120.843252 93.858668-147.542334 15.621792-7.315616 22.353101-25.911136 15.037485-41.532929-7.305383-15.616676-25.90602-22.353101-41.532929-15.037485-78.867232 36.932144-129.830951 117.055996-129.830951 204.112748C251.667833 623.838158 305.671795 705.313797 389.251352 740.659817z"
                  fill="#2c2c2c"
                  p-id="9618"
                ></path>
                <path
                  d="M610.318236 683.123402c-15.886829 6.721075-23.319102 25.047466-16.603143 40.933271 5.042853 11.916401 16.60826 19.078521 28.783557 19.078521 4.056386 0 8.179286-0.798179 12.149714-2.475378 83.579557-35.347043 137.583518-116.821659 137.583518-207.564359 0-87.056752-50.963719-167.175487-129.836067-204.112748-15.637142-7.336082-34.223452-0.584308-41.532929 15.037485-7.315616 15.621792-0.584308 34.218336 15.037485 41.532929 57.022715 26.704199 93.863784 84.61719 93.863784 147.542334C709.764156 598.684268 670.727071 657.573493 610.318236 683.123402z"
                  fill="#2c2c2c"
                  p-id="9619"
                ></path></svg
              >我的订单
            </li>
          </router-link>
          <router-link :to="{ name: 'shelves' }" v-if="user.role == 0">
            <li>
              <svg
                t="1712735794154"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5995"
                width="24"
                height="24"
                style="margin: 6px"
              >
                <path
                  d="M961.07 344.96v-0.08c0-0.66-0.03-1.32-0.07-1.98v-0.04c-0.05-0.67-0.11-1.34-0.2-2.01l-0.03-0.21c-0.08-0.54-0.17-1.09-0.27-1.63-0.03-0.17-0.07-0.34-0.1-0.51-0.1-0.48-0.21-0.97-0.34-1.45-0.03-0.13-0.06-0.27-0.1-0.4-0.16-0.59-0.34-1.17-0.53-1.75-0.05-0.14-0.1-0.29-0.15-0.43-0.16-0.45-0.32-0.89-0.5-1.33-0.07-0.17-0.14-0.34-0.21-0.5-0.2-0.48-0.41-0.96-0.64-1.43-0.04-0.08-0.08-0.17-0.12-0.25-0.28-0.58-0.59-1.16-0.91-1.72-0.02-0.03-0.03-0.05-0.05-0.08-0.3-0.53-0.63-1.06-0.96-1.58-0.04-0.07-0.09-0.13-0.13-0.2a31.878 31.878 0 0 0-3.74-4.65l-0.05-0.05c-0.46-0.48-0.94-0.94-1.44-1.39l-0.02-0.02c-0.99-0.89-2.04-1.72-3.15-2.5l-0.28-0.19c-0.43-0.29-0.87-0.58-1.32-0.85-0.08-0.05-0.16-0.11-0.25-0.16-0.06-0.04-0.13-0.07-0.2-0.11-0.44-0.26-0.89-0.51-1.35-0.75-0.12-0.06-0.24-0.13-0.36-0.2-0.03-0.02-0.06-0.03-0.09-0.05L718.69 202.81l-0.24-0.12-192.01-97.1a31.995 31.995 0 0 0-28.83-0.02L78.76 316.47c-0.06 0.03-0.11 0.06-0.17 0.09-0.16 0.08-0.31 0.17-0.47 0.25-0.42 0.23-0.84 0.46-1.25 0.7-0.08 0.05-0.16 0.09-0.24 0.13-0.08 0.05-0.15 0.1-0.23 0.15-0.47 0.29-0.93 0.58-1.37 0.89-0.07 0.05-0.14 0.09-0.21 0.14-1.11 0.78-2.16 1.62-3.15 2.51-0.03 0.02-0.05 0.05-0.08 0.07-0.49 0.45-0.96 0.9-1.42 1.38l-0.01 0.01c-0.95 0.98-1.82 2.01-2.63 3.08-0.02 0.02-0.03 0.04-0.05 0.06-0.37 0.5-0.72 1-1.06 1.52-0.04 0.06-0.08 0.13-0.13 0.19-0.7 1.08-1.33 2.2-1.89 3.35-0.02 0.03-0.03 0.07-0.05 0.1-0.31 0.66-0.61 1.33-0.88 2.01-0.01 0.03-0.02 0.06-0.04 0.09-0.19 0.47-0.36 0.95-0.53 1.43-0.04 0.11-0.08 0.21-0.11 0.32-0.19 0.58-0.36 1.16-0.52 1.74-0.06 0.23-0.11 0.46-0.18 0.69-0.13 0.45-0.22 0.92-0.31 1.38l-0.06 0.31c-0.24 1.26-0.41 2.54-0.5 3.83 0 0.06-0.01 0.12-0.01 0.17-0.04 0.63-0.06 1.27-0.06 1.9V685.26c0 12.11 6.84 23.19 17.67 28.61l419.18 210c0.01 0.01 0.03 0.01 0.04 0.02l0.3 0.15c0.39 0.2 0.79 0.37 1.18 0.55l0.51 0.24c0.62 0.27 1.25 0.51 1.88 0.74 0.18 0.06 0.37 0.12 0.55 0.18 0.46 0.16 0.93 0.31 1.4 0.44 0.24 0.07 0.48 0.13 0.71 0.19 0.42 0.11 0.83 0.21 1.25 0.3 0.27 0.06 0.54 0.11 0.81 0.17 0.39 0.07 0.77 0.14 1.16 0.2 0.3 0.05 0.6 0.09 0.9 0.13 0.35 0.04 0.71 0.08 1.06 0.11 0.33 0.03 0.66 0.07 0.99 0.09 0.15 0.01 0.31 0.01 0.46 0.02 0.72 0.02 1.44 0.06 2.15 0.04 1.19-0.03 2.39-0.13 3.58-0.29l0.24-0.03c0.62-0.09 1.23-0.19 1.84-0.32l0.32-0.06c0.6-0.13 1.2-0.27 1.79-0.44 0.1-0.03 0.19-0.05 0.29-0.08 0.67-0.19 1.34-0.4 2-0.64 0.01 0 0.02-0.01 0.02-0.01 0.66-0.24 1.32-0.5 1.98-0.79 0.17-0.08 0.34-0.16 0.52-0.24 0.37-0.17 0.75-0.34 1.12-0.52L717.72 828c15.79-7.95 22.14-27.19 14.19-42.97-7.95-15.78-27.19-22.14-42.97-14.19L545.3 843.16a0.444 0.444 0 0 1-0.64-0.4V590.85c0-3.17 1.75-6.08 4.55-7.57l335.44-178.36c5.7-3.03 12.59 1.09 12.6 7.55l0.37 132.91c0.05 17.64 14.37 31.91 32 31.91h0.09c17.67-0.05 31.96-14.42 31.91-32.09l-0.55-200.24zM508.59 528.13l-124.72-65.82c-6.01-3.17-6.12-11.75-0.18-15.07l317.22-177.45a8.584 8.584 0 0 1 8.06-0.17L844.8 338.3c6.2 3.14 6.29 11.96 0.16 15.23L516.62 528.12a8.58 8.58 0 0 1-8.03 0.01z m7.24-356.19l105.83 53.52c6.13 3.1 6.31 11.79 0.32 15.14L306.53 417.06a8.565 8.565 0 0 1-8.19 0.1l-120.65-63.68c-6.16-3.25-6.08-12.11 0.15-15.25l330.26-166.3a8.62 8.62 0 0 1 7.73 0.01z m-378.1 232.83l338.36 178.58a8.571 8.571 0 0 1 4.57 7.59v238.78c0 6.38-6.72 10.53-12.42 7.67l-338.36-169.5a8.58 8.58 0 0 1-4.74-7.67V412.35c0.01-6.46 6.88-10.6 12.59-7.58zM956.35 762.55h-0.22c-8.18 0.12-14.73 6.86-14.61 15.04l0.5 34.39H804.98v-34.61c0-8.19-6.63-14.82-14.82-14.82s-14.82 6.63-14.82 14.82v49.43c0 8.19 6.63 14.82 14.82 14.82h166.91a14.822 14.822 0 0 0 14.82-15.04l-0.73-49.43c-0.11-8.1-6.73-14.6-14.81-14.6z"
                  p-id="5996"
                ></path>
                <path
                  d="M873.3 805.14c8.19 0 14.82-6.11 14.82-15.52v-82.18L922 723c7.6 3.49 16.23-0.76 19.27-9.49 3.04-8.73-0.66-18.64-8.24-22.12l-54.2-24.89c-0.03-0.01-0.06-0.01-0.08-0.03-0.39-0.19-0.8-0.34-1.21-0.48-0.09-0.03-0.18-0.05-0.27-0.08-0.33-0.11-0.67-0.2-1.01-0.28-0.12-0.02-0.24-0.05-0.36-0.07-0.33-0.07-0.67-0.12-1.02-0.16-0.09-0.01-0.18-0.03-0.27-0.04-0.44-0.04-0.87-0.07-1.32-0.07-0.13 0-0.26 0.01-0.39 0.02-0.27 0.01-0.55 0.02-0.82 0.04-0.19 0.02-0.37 0.05-0.56 0.07-0.24 0.04-0.48 0.07-0.72 0.12-0.18 0.03-0.35 0.07-0.53 0.11-0.29 0.07-0.57 0.15-0.85 0.24-0.13 0.04-0.24 0.07-0.37 0.11-0.42 0.14-0.82 0.3-1.22 0.48-0.02 0.01-0.04 0.01-0.06 0.02l-54.2 24.89c-7.6 3.49-11.29 13.4-8.26 22.13 3.04 8.73 11.66 12.98 19.27 9.49l33.88-15.56v82.13c0.02 9.4 6.65 15.56 14.84 15.56zM456.93 633.58a9.615 9.615 0 0 0-2.62-12.47c-0.52-0.39-12.93-9.57-31.46-17.48-10.96-4.68-21.84-7.97-32.34-9.79-13.42-2.32-26.27-2.22-38.2 0.28-11.93 2.51-23.73 7.59-35.08 15.11-8.89 5.89-17.53 13.28-25.67 21.97-9.57 10.21-16.19 19.79-19.45 24.88l-11.35 2.46-0.7-4.56c6.52-9.77 23.25-38.48 17.35-68.34-7.13-36.02-44.07-57.95-45.64-58.87a9.621 9.621 0 0 0-12.5 2.47c-1.1 1.44-26.92 35.79-19.79 71.81 5.82 29.44 31.57 49.47 41.64 56.31l0.81 5.26-35.59 7.71c-5.2 1.12-8.49 6.25-7.37 11.44a9.581 9.581 0 0 0 4.42 6.19 9.551 9.551 0 0 0 7.02 1.17l65.71-14.24c1.45 0.96 3.29 2.14 5.48 3.47 5.47 3.31 13.13 7.53 22.27 11.43 10.96 4.68 21.84 7.97 32.34 9.79 13.42 2.32 26.27 2.22 38.2-0.28 11.93-2.51 23.73-7.59 35.08-15.11 8.89-5.89 17.53-13.28 25.67-21.97 13.78-14.68 21.45-28.07 21.77-28.64z m-218.44-3.04c-7.64-7.33-17.33-19.04-20.14-33.2-3.72-18.83 5.21-38.27 11.25-48.69 2.6 2 5.66 4.53 8.79 7.54 7.64 7.33 17.33 19.04 20.14 33.2 3.73 18.83-5.21 38.27-11.25 48.69-2.6-2-5.65-4.53-8.79-7.54z m182.32 18.88c-10.99 11.66-28.65 26.51-50.35 31.07-21.7 4.56-43.84-1.93-58.6-8.19-8.36-3.54-15.38-7.41-20.29-10.39-0.04-0.03-0.09-0.05-0.13-0.08 9.64-13.77 32.93-42.16 64.84-48.87 21.7-4.56 43.84 1.93 58.6 8.19 8.43 3.57 15.49 7.48 20.42 10.47-3.32 4.71-8.22 11.14-14.49 17.8z"
                  p-id="5997"
                ></path></svg
              >上架作品
            </li>
          </router-link>
          <router-link
            :to="{ name: 'personalInformation' }"
            v-if="user.is_superuser == false"
          >
            <li>
              <svg
                t="1709259686977"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="16361"
                width="24"
                height="24"
                style="margin: 7px"
              >
                <path
                  d="M965.782426 977.682694l0.047323 0c-0.071488-0.73804-0.189293-1.465005-0.263802-2.208079l-0.147004-1.481115c0-3.579444-0.504445-7.01994-1.279739-10.365789C943.303918 800.569168 837.107693 664.39925 691.90207 601.698057c84.040924-57.741321 139.211691-154.729665 139.211691-264.689592 0-177.046066-142.975393-320.567186-319.343831-320.567186-176.370452 0-319.345845 143.522127-319.345845 320.567186 0 109.996175 55.209028 207.016738 139.298282 264.748998-143.914809 62.204803-249.521004 196.572413-271.591727 357.763201-1.531458 4.574238-2.552431 9.381064-2.552431 14.47183l0.364489 3.681139c0 0.008055 0 0.008055 0 0.008055l0 0 0.054371 0.551768c0 25.250438 20.387226 45.714187 45.531942 45.714187s45.529929-20.463749 45.529929-45.714187l-0.055378-0.551768 0.92834 0c21.254147-174.735285 165.057192-311.431799 342.557359-320.740369 6.38158 0.380599 12.799408 0.633325 19.28067 0.633325 6.492337 0 12.922247-0.252726 19.316917-0.640373 177.513256 9.290445 321.336439 145.999042 342.59562 320.747417l1.027014 0 0.054371 0.551768c0 25.250438 20.387226 45.714187 45.544025 45.714187 25.144716 0 45.531942-20.463749 45.531942-45.714187L965.782426 977.682694zM283.585635 337.101098c0-126.461619 102.116363-228.982746 228.098709-228.982746 125.981339 0 228.108778 102.522134 228.108778 228.982746 0 119.397377-91.067912 217.344266-207.269464 227.925527-6.841723-0.309111-13.7207-0.492362-20.64398-0.492362-7.007857 0-13.980474 0.184258-20.914829 0.497397C374.708925 554.505776 283.585635 456.540763 283.585635 337.101098z"
                  p-id="16362"
                  fill="#2c2c2c"
                ></path></svg
              >个人信息
            </li>
          </router-link>

          <router-link
            :to="{ name: 'PersonnelManagement' }"
            v-if="user.is_superuser == true"
          >
            <li>
              <svg
                t="1709259553633"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="13793"
                width="24"
                height="24"
                style="margin: 7px"
              >
                <path
                  d="M263.1 844.8h497.7c22.9 0 41.5 18.6 41.5 41.5s-18.6 41.5-41.5 41.5H263.1c-22.9 0-41.5-18.6-41.5-41.5s18.6-41.5 41.5-41.5zM138.7 98.2h746.6c22.9 0 41.5 18.6 41.5 41.5v580.7c0 11-4.4 21.6-12.1 29.3-7.8 7.8-18.3 12.1-29.3 12.1H138.7c-11 0-21.6-4.4-29.3-12.1-7.8-7.8-12.1-18.3-12.1-29.3V139.7c-0.1-22.9 18.5-41.5 41.4-41.5z m331.8 478.9v60.4h83v-60.3c8.5-5.8 17.4-12.8 26.5-20.5l49.4 49.4 58.7-58.7-49.5-49.4c7.7-9 14.6-18 20.5-26.5h60.3v-83h-60.3c-6.4-9.1-13.3-18-20.5-26.5l49.4-49.4-58.7-58.6-49.4 49.4c-8.5-7.3-17.3-14.1-26.5-20.5v-60.3h-83V283c-8.5 5.8-17.4 12.8-26.5 20.5l-49.4-49.4-58.5 58.6 49.4 49.4c-7.2 8.5-14.1 17.3-20.5 26.5h-60.3v83h60.3c5.8 8.5 12.8 17.4 20.5 26.5L336 547.3l58.7 58.7 49.4-49.4c9.1 7.7 18 14.6 26.4 20.5z m0 0"
                  p-id="13794"
                  fill="#2c2c2c"
                ></path>
              </svg>
              跳转到后台
            </li>
          </router-link>
        </ul>
      </div>
      <div class="nav">
        <ul>
          <router-link :to="{ name: 'home' }">
            <li>
              <svg
                t="1709258987042"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4277"
                width="36"
                height="36"
              >
                <path
                  d="M682.666667 524.8v-34.133333h85.333333L512 256l-256 234.666667h85.333333V725.333333c0 25.6 17.066667 42.666667 42.666667 42.666667h21.333333c12.8 0 21.333333-8.533333 21.333334-21.333333v-170.666667c0-12.8 8.533333-21.333333 21.333333-21.333333h128c12.8 0 21.333333 8.533333 21.333333 21.333333v170.666667c0 12.8 8.533333 21.333333 21.333334 21.333333h21.333333c25.6 0 42.666667-17.066667 42.666667-42.666667v-64c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333333 21.333333V725.333333c0 46.933333-38.4 85.333333-85.333333 85.333334h-64c-12.8 0-21.333333-8.533333-21.333333-21.333334v-170.666666c0-12.8-8.533333-21.333333-21.333334-21.333334h-42.666666c-12.8 0-21.333333 8.533333-21.333334 21.333334v170.666666c0 12.8-8.533333 21.333333-21.333333 21.333334H384c-46.933333 0-85.333333-38.4-85.333333-85.333334v-192H256c-25.6 0-42.666667-17.066667-42.666667-42.666666 0-8.533333 4.266667-21.333333 12.8-29.866667l256-234.666667c17.066667-17.066667 42.666667-17.066667 64-4.266666l4.266667 4.266666 256 234.666667c17.066667 17.066667 12.8 42.666667-4.266667 59.733333-8.533333 8.533333-17.066667 12.8-29.866666 12.8h-42.666667v42.666667c0 12.8-8.533333 21.333333-21.333333 21.333333s-25.6-8.533333-25.6-21.333333v-51.2z"
                  p-id="4278"
                  fill="#2c2c2c"
                ></path></svg
              >首页
            </li>
          </router-link>
          <router-link :to="{ name: 'artworkInformation' }">
            <li>
              <svg
                t="1713181109364"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2730"
                width="36"
                height="36"
              >
                <path
                  d="M828.139 309.731H656.251l-83.476-84.689a67.012 67.012 0 0 0 6.648-29.181c0-37.177-30.246-67.423-67.423-67.423s-67.423 30.246-67.423 67.423a67.01 67.01 0 0 0 6.648 29.182l-83.474 84.688h-171.89c-37.152 0-67.423 30.277-67.423 67.423v450.985c0 37.167 30.294 67.423 67.423 67.423h632.278c37.18 0 67.423-30.309 67.423-67.423V377.154c0-37.18-30.307-67.423-67.423-67.423zM512 173.387c12.392 0 22.474 10.082 22.474 22.474S524.392 218.335 512 218.335s-22.474-10.082-22.474-22.474 10.082-22.474 22.474-22.474z m-28.92 83.368a67.008 67.008 0 0 0 28.92 6.53 67.005 67.005 0 0 0 28.92-6.53l52.217 52.977H430.863l52.217-52.977z m335.75 97.925l-44.949 44.949H250.119L205.17 354.68h613.66zM691.795 625.87c-46.995 0-91.545 15.928-127.491 45.218-73.269-59.437-163.29-90.167-254.573-90.167-15.473 0-31.179 0.862-46.447 2.522V444.577h497.432v193.014c-21.935-7.637-45.517-11.721-68.921-11.721z m68.921 60.155v74.691H646.143a406.63 406.63 0 0 0-48.076-58.964c26.956-20.077 59.509-30.934 93.727-30.934 23.871 0.001 47.893 5.358 68.922 15.207zM590.51 760.716H263.284V628.703a385.898 385.898 0 0 1 46.447-2.833c111.405 0 213.325 50.329 280.779 134.846zM173.387 818.83V386.463l44.949 44.949v342.47l-44.949 44.948z m31.783 31.783l44.949-44.949h523.763l44.949 44.949H205.17z m645.443-31.784l-44.949-44.947v-342.47l44.949-44.949v432.366z"
                  fill="#545462"
                  p-id="2731"
                ></path>
                <path
                  d="M556.949 491.024c-37.177 0-67.423 30.246-67.423 67.423s30.246 67.423 67.423 67.423 67.423-30.246 67.423-67.423-30.246-67.423-67.423-67.423z m0 89.897c-12.392 0-22.474-10.082-22.474-22.474s10.082-22.474 22.474-22.474 22.474 10.082 22.474 22.474-10.082 22.474-22.474 22.474z"
                  fill="#2770F0"
                  p-id="2732"
                ></path>
              </svg>
              艺术品
            </li>
          </router-link>
          <router-link :to="{ name: 'artistInformation' }">
            <li>
              <svg
                t="1713181185966"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3901"
                width="36"
                height="36"
              >
                <path
                  d="M501.9392 939.56096c-81.64352 0-130.88768-34.0992-130.88768-34.0992l86.75328-8.51968c76.71296-18.74944 109.33248-55.05024 125.7728-72.192l32.76288 34.67776c-25.55904 46.03392-83.09248 80.13312-114.40128 80.13312z m104.1408-217.53856l6.8608-10.90048c173.89056-69.89312 152.17152-228.43904 150.62528-281.14944-3.54816-121.12384-104.75008-310.11328-311.79264-340.88448l-0.0256-7.02464a437.80608 437.80608 0 0 1 67.49696-5.2224c238.82752 0 435.7632 176.26624 438.98368 392.91904 0 143.03232-115.34336 259.35872-257.11104 259.35872l-95.03744-7.09632z"
                  fill="#CCCCCC"
                  p-id="3902"
                ></path>
                <path
                  d="M519.13216 974.976c-253.11232 0-459.0336-206.45376-459.0336-460.2368 0-66.24256 13.77792-130.29888 40.94464-190.39744a26.39872 26.39872 0 0 1 34.95936-13.21984c13.26592 5.9392 19.20512 21.632 13.2352 34.9696-24.1152 53.1712-36.352 109.90592-36.352 168.6528 0 224.67584 182.23616 407.44448 406.23616 407.44448 38.53312 0 69.87776-31.34976 69.87776-69.88288 0-17.15712-6.09792-33.91488-15.90784-43.73504-13.09184-15.80544-18.31936-28.48256-18.31936-44.01152 0-36.01408 29.2608-65.32096 65.2032-65.32096h81.024c125.29152 0 227.22048-102.87104 227.22048-229.30432-3.06176-200.17664-186.56768-363.06944-409.088-363.06944-61.84448 0-121.216 13.6192-176.47616 40.48896a26.12224 26.12224 0 0 1-11.50464 2.65728 26.55744 26.55744 0 0 1-23.74656-14.86848 26.1632 26.1632 0 0 1-1.19296-20.15232 26.2144 26.2144 0 0 1 13.40928-15.08864c62.33088-30.336 129.45408-45.7216 199.5008-45.7216 251.14112 0 458.34752 186.38336 461.9008 415.48288 0 155.79136-125.60896 282.49088-280.0128 282.49088H619.9808c-6.72256 0-12.41088 5.7344-12.41088 12.51328 0 1.5616 0 3.0208 4.58752 8.64256 18.12992 17.98144 29.53728 48.39936 29.53728 79.09376 0.05632 32.64-12.65664 63.39072-35.78368 86.54848-23.18848 23.23456-54.01088 36.02432-86.77888 36.02432zM181.23776 270.01856a26.55232 26.55232 0 0 1-16.40448-5.72416c-11.33568-9.06752-13.21984-25.72288-4.224-37.13536a463.14496 463.14496 0 0 1 75.79136-75.34592 26.32704 26.32704 0 0 1 16.32768-5.64736c8.1664 0 15.71328 3.68128 20.7104 10.112a26.04544 26.04544 0 0 1 5.44256 19.40992 26.32704 26.32704 0 0 1-9.90208 17.59744c-24.5248 19.2512-47.10912 41.68704-67.13344 66.69824-4.7872 6.3488-12.32384 10.0352-20.608 10.0352z"
                  fill="#666666"
                  p-id="3903"
                ></path>
                <path
                  d="M498.75968 599.424c-35.10272-0.32256-69.53472-5.51424-99.61472-15.0272-33.89952-10.71104-60.88704-26.39872-80.21504-46.6176-10.21952-10.72128-9.87136-27.79136 0.75776-38.0416a26.88 26.88 0 0 1 18.60608-7.46496 26.624 26.624 0 0 1 19.46112 8.3456c25.984 27.17184 80.18944 44.38016 141.47072 44.91776l2.93376 0.01536c61.90592 0 117.19168-16.9472 144.25088-44.21632a26.66496 26.66496 0 0 1 19.09248-8.00256c7.14752 0 13.88032 2.7904 18.9696 7.87968 10.5216 10.52672 10.56256 27.5968 0.10752 38.05696-37.32992 37.6576-105.49248 60.16-182.30272 60.16l-3.51744-0.00512zM315.008 364.89216c0 30.9504 25.088 56.0384 56.04352 56.0384 30.9504 0 56.0384-25.088 56.0384-56.0384 0.01536-30.9504-25.05728-56.05376-56.00768-56.07424-30.9504-0.01536-56.05376 25.0624-56.06912 56.00768l-0.00512 0.06656zM576.72192 364.89216c-0.0256 30.9504 25.05216 56.05376 56.00256 56.06912 30.95552 0.01536 56.04864-25.05728 56.06912-56.00768v-0.06144c0.02048-30.9504-25.0624-56.05376-56.00256-56.07424-30.94528-0.01536-56.04352 25.0624-56.064 56.00768l-0.00512 0.06656z"
                  fill="#666666"
                  p-id="3904"
                ></path></svg
              >艺术家
            </li>
          </router-link>
        </ul>
      </div>
      <div class="content" ref="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {};
  },
  methods: {
    // 页面高度监测
    PageHeightMonitoring() {
      let parentElement = this.$refs.content;
      let totalHeight = 0;
      // 遍历子元素并累加它们的高度
      Object.values(parentElement.children).forEach((child) => {
        totalHeight += child.offsetHeight;
      });
      if (totalHeight > 825) {
        this.$refs.adminBoxElement.style.width = "calc(100% + 17px)";
      } else {
        this.$refs.adminBoxElement.style.width = "calc(100%)";
      }
    },
  },

  computed: {
    ...mapState(["user"]),
  },
};
</script>

<style lang="less" scoped>
.outer-container {
  width: 100%; /* 外部容器的宽度 */
  height: 100vh; /* 外部容器的高度 */
  overflow: hidden; /* 隐藏外部容器的滚动条 */
  position: relative; /* 相对定位 */

  /* 隐藏默认滚动条 */
  ::-webkit-scrollbar {
    width: 5px; /* 设置滚动条宽度 */
  }

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #ccc #fff; /* 设置滚动条颜色，前者为滑块颜色，后者为滚动条背景颜色 */

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background-color: #fff; /* 设置滚动条轨道背景颜色 */
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    background-color: #ccc; /* 设置滚动条滑块颜色 */
    border-radius: 50%; /* 设置滚动条滑块圆角 */
  }

  /* 滚动条滑块悬停状态 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 设置滚动条滑块悬停状态颜色 */
  }
}
.admin_box {
  width: calc(100%);
  height: 100vh;
  padding: 20px 20px 20px 20px;
  overflow-y: auto; /* 允许内部容器的内容垂直滚动 */
  box-sizing: border-box;
  background: #fff;

  .head {
    display: flex;
    justify-content: space-between;
    // background: #f5f8fc;
    height: 8%;

    .search {
      width: 500px;
      .search_Box {
        display: flex;
       
      }
    }

    ul {
      display: flex;
      justify-content: center;
      a {
        text-decoration: none;
        color: #000;
        li {
          display: flex;
          align-items: center;
          list-style: none;
          margin: 5px 20px;
          svg {
            margin: 0 5px;
          }
        }
      }
    }
  }
  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #cddbed;
    height: 5%;
    ul {
      display: flex;
      justify-content: center;
      a {
        text-decoration: none;
        color: #000;
        li {
          display: flex;
          align-items: center;
          list-style: none;
          margin: 5px 20px;
          font-size: 20px;
          svg {
            margin: 0 5px;
          }
        }
      }
    }
  }

  .content {
    width: 100%;
    height: 10%;
  }
}
</style>
